<template>
    <div>
        <div :id="chartName" class="box"></div>
    </div>
</template>
<script setup lang="ts">
import { onMounted, reactive } from 'vue'
import * as echarts from 'echarts'
const props = defineProps<{
  chartName: string
}>()
const demo = () => {
  let myChart = echarts.init(document.getElementById(props.chartName))

  var dataStyle = {
    normal: {
      label: { show: false },
      labelLine: { show: false },
      shadowBlur: 40,
      shadowColor: 'rgba(40, 40, 40, 0.5)',
    },
  }
  var placeHolderStyle = {
    normal: {
      color: 'rgba(0,0,0,0)',
      label: { show: false },
      labelLine: { show: false },
    },
    emphasis: {
      color: 'rgba(0,0,0,0)',
    },
  }
  let option = {
    backgroundColor: '#ffffff32',
    color: ['#0c6ce4', '#5ff4f2', '#e2af05', '#33b267', '#00a3e7'],
    tooltip: {
      show: true,
      formatter: '{a} <br/>{b} : {c} ({d}%)',
    },
    legend: {
      itemGap: 12,

      top: '65%',
      data: ['中国区', '欧美区', '亚太区', '非洲区', '美洲区'],
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        color: '#fff',
      },
    },
    // toolbox: {
    //   show: false,
    //   feature: {
    //     mark: { show: true },
    //     dataView: { show: true, readOnly: false },
    //     restore: { show: true },
    //     saveAsImage: { show: true },
    //   },
    // },

    series: [
      {
        name: '中国区',
        type: 'pie',
        clockWise: false,
        radius: [56, 61],
        itemStyle: dataStyle,
        hoverAnimation: false,
        center: ['50%', '33%'],
        data: [
          {
            value: 300,
            name: '01',
          },
          {
            value: 50,
            name: 'invisible',
            itemStyle: placeHolderStyle,
          },
        ],
      },
      {
        name: '欧美区',
        type: 'pie',
        clockWise: false,
        radius: [52, 56],
        itemStyle: dataStyle,
        hoverAnimation: false,
        center: ['50%', '33%'],
        data: [
          {
            value: 150,
            name: '02',
          },
          {
            value: 60,
            name: 'invisible',
            itemStyle: placeHolderStyle,
          },
        ],
      },
      {
        name: '亚太区',
        type: 'pie',
        clockWise: false,
        hoverAnimation: false,
        radius: [48, 52],
        itemStyle: dataStyle,
        center: ['50%', '33%'],
        data: [
          {
            value: 80,
            name: '03',
          },
          {
            value: 50,
            name: 'invisible',
            itemStyle: placeHolderStyle,
          },
        ],
      },
      {
        name: '非洲区',
        type: 'pie',
        clockWise: false,
        hoverAnimation: false,
        radius: [44, 48],
        itemStyle: dataStyle,
        center: ['50%', '33%'],
        data: [
          {
            value: 45,
            name: '04',
          },
          {
            value: 30,
            name: 'invisible',
            itemStyle: placeHolderStyle,
          },
        ],
      },
      {
        name: '美洲区',
        type: 'pie',
        clockWise: false,
        hoverAnimation: false,
        radius: [40, 44],
        itemStyle: dataStyle,
        center: ['50%', '33%'],
        data: [
          {
            value: 30,
            name: '05',
          },
          {
            value: 30,
            name: 'invisible',
            itemStyle: placeHolderStyle,
          },
        ],
      },
    ],
  }

  myChart.setOption(option)
  window.addEventListener('resize', function() {
    // 让我们的图表调用 resize这个方法
    myChart.resize()
  })
}
onMounted(() => {
  demo()
})
</script>
<style lang='scss' scoped>
.box {
  width: 100%;
  height: 200px;
  //   background: #fff;
}
</style>